<template>
  <el-progress :percentage="props.value" :color="progressColor"></el-progress>
</template>

<script setup lang="ts">
import {ref, watch, onMounted} from 'vue';
import Layers from "@/lang/layers/index";
import DictionaryUtils from "@/lang/dict/dictionary-utils";
import setting from "@/widget/provider/setting";
import {UseDictionary, useDictionary} from "@/widget/use/use-dictionary";
import Dictionary from "@/lang/dict/dictionary";

/**
 * 数据字典
 *
 * 简单的文本转换，value 转换成 progress，提供了异步加载的功能
 */
interface Props extends /* @vue-ignore */ UseDictionary {
    // 值字段名
    value?: string | boolean | number | undefined
    // 数据匹配方式：default（等值比较）、range（区间比较）
    type?: 'default' | 'range'

    // 默认样式：未匹配数据时展示的样式
    color?: string
    // 禁用样式：某些场景下，样式反而不利于布局，这时候可以禁用样式
    disabledStyle?: boolean

    /** 数据字典配置 */
    options: DictionaryItem[] | string
    /** 异步查询参数 */
    where?: Record<string, any>
    /** 异步获取字典数据的函数 */
    provider?: DictionaryQuery
}

// 使用 withDefaults 设置默认值
const props = withDefaults(defineProps<Props>(), {
    type: 'range',
    provider: () => setting.queryDictionary
})

// css样式
const progressColor = ref('');

// 如果未匹配到样式，采用的样式
const defaultColor = ref(props.color);

/**
 * 色值匹配
 */
const match = () => {
    if (Layers.isEmpty(props.value)) {
        // 如果值为空，也禁用样式
        progressColor.value = '';
    } else {
        let val = props.value;
        let dic= DictionaryUtils.findByRange(opts.value, val);
        if (dic !== undefined) {
            progressColor.value = dic.style || props.color || defaultColor.value;
        } else {
            progressColor.value = props.color || defaultColor.value;
        }
    }
};

// 当前使用的数据字典
let dictionary = Dictionary.DEF;
const onchange = (dict) =>{
    dictionary = dict;
    match();
}

// 监听 props.value 的变化
watch(() => props.value, match);

const {opts, loading} = useDictionary(props, onchange);
</script>